<template>
  <div class="tabarMain">
    <div class="barFrame">
      <!-- 欢迎 -->
      <div class="welcome">
        <div v-if="user == null"
          @click="dialogVisible = true">
          您好 请先 <span class="frameFont">登录</span> 或
          <span class="frameFont">注册</span>
        </div>
        <div v-else>
          欢迎您，<span class="frameFont">{{ user.ulname }}</span>
        </div>
      </div>
      <!-- 欢迎 End -->

      <div class="">
        <!-- 状态订单表格 -->
        <el-popover popper-class="popoverPadding"
          placement="bottom"
          width="900"
          trigger="click">
          <el-tabs tabPosition="left"
            type="border-card"
            height="250">
            <el-tab-pane v-for="(item, index) in orderState"
              :key="index">
              <div slot="label"
                @click="getOrderGoods(index + 1)">
                {{ item }}
              </div>
              <!-- 代码区域 -->
              <el-table :data="tableData"
                style="width: 100%"
                max-height="250">

                <el-table-column width="80"
                  label="商品">
                  <template slot-scope="scope">
                    <img style="height:50px;width:50px;"
                      :src="scope.row.commodity.picture" />
                  </template>
                </el-table-column>

                <el-table-column prop="commodity.name"
                  label="名称"
                  width="180">
                </el-table-column>

                <el-table-column prop="commodity.price"
                  label="单价">
                </el-table-column>

                <el-table-column label="规格">
                  <template slot-scope="scope">
                    {{scope.row.commcolor+"/"+scope.row.commodguige}}
                  </template>
                </el-table-column>

                <el-table-column label="数量">
                  <template slot-scope="scope">
                    <el-link type="info">×{{scope.row.commoditysum}}</el-link>
                  </template>
                </el-table-column>

                <el-table-column label="小计">
                  <template slot-scope="scope">
                    {{Math.floor(scope.row.commodity.price*scope.row.commoditysum * 100) / 100}}元
                  </template>
                </el-table-column>

                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini"
                      @click="handleEdit(index, scope.row.commodityid)">{{
                      index == 0
                      ? "去支付"
                      : index == 1
                      ? "提醒发货"
                      : index == 2
                      ? "立即收货"
                      : index == 3
                      ? "去评价"
                      : "再次购买"
                      }}</el-button>
                  </template>
                </el-table-column>
              </el-table>

            </el-tab-pane>
          </el-tabs>
          <span @click="getOrderGoods(1)"
            slot="reference"
            class="el-dropdown-link order">
            我的订单
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        </el-popover>
        <!-- 状态订单表格 End-->

        <!-- 购物车按钮 -->
        <el-badge :max="10"
          :value="$store.state.shoppingCartNum"
          class="shoppingCartStyle">
          <el-button :type="$store.state.shoppingCartNum > 0 ? 'warning' : ''"
            class="shoppingCartBtn"
            @click="goShoppingCart()"
            size="small"><i class="el-icon-shopping-cart-2"></i>购物车</el-button>
        </el-badge>
        <!-- 购物车按钮 End-->

        <!-- 我的  -->
        <el-popover placement="bottom"
          width="200"
          trigger="hover">
          <div v-if="user"
            class="user-container">
            <img class="userImg"
              :src="user.uface" />
            <div class="user-font-style">{{ user.ulname }}</div>

            <div class="icon-container">
              <div class="icon1"><i class="el-icon-view"></i>我的足迹</div>
              <div class="icon1">
                <i class="el-icon-shopping-bag-2"></i>我的收藏
              </div>
              <div class="icon1"
                @click=" getUserMoneyBag()">
                <i class="el-icon-c-scale-to-original"></i>我的钱包
              </div>
              <div class="icon1">
                <i class="el-icon-collection-tag"></i>我的优惠券
              </div>
            </div>

            <div class="btn-container">
              <el-button @click="logout"
                type="warning"
                size="mini">退出账号</el-button>
              <el-button type="success"
                size="mini">修改信息</el-button>
            </div>
          </div>
          <div v-else>
            <el-empty :image-size="100"
              description="未登录">
              <el-button @click="dialogVisible = true"
                type="primary">登录</el-button>
            </el-empty>
          </div>

          <span style="margin-left: 10px"
            slot="reference"
            class="el-dropdown-link order">
            {{ user == null ? "未登录" : "我的" }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        </el-popover>
        <!-- 我的  End-->
      </div>
    </div>

    <div class="tabarMain">
      <div class="tabarFrame">
        <!-- ESHOP--Logo -->
        <div class="">
          <p @click="home()"
            class="ESHOP">ESHOP</p>
        </div>
        <!-- ESHOP--Logo End -->

        <!-- autoComplete 搜索框-->
        <div>
          <el-autocomplete class="el-input"
            ref="autocomplete"
            placeholder="请输入商品关键字"
            v-model="queryInfo"
            clearable
            @clear="clickClearable"
            :highlight-keyword="true"
            :fetch-suggestions="querySearch"
            @select="handleSelect"
            :trigger-on-focus="false">

            <el-button slot="append"
              icon="el-icon-search"
              @click="toDeatail"></el-button>

            <template v-if="(item.id != 0)"
              slot-scope="{ item }">
              <div class="name"
                v-html="htmlValue(item.value)"></div>
              <span class="addr">{{ item.text }} | ￥{{ item.price }}起 | {{ item.blackname }}</span>
            </template>

            <template v-else
              slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
            </template>
          </el-autocomplete>

          <!-- autoComplete 搜索框 End-->

        </div>
      </div>
    </div>
    <!-- 登录Dialog -->
    <el-dialog title="登录"
      :visible.sync="dialogVisible"
      width="30%">
      <el-input placeholder="请输入账号"
        v-model="username"
        clearable></el-input>

      <el-input placeholder="请输入密码"
        show-password
        v-model="password"
        clearable></el-input>

      <el-link type="primary">点击注册</el-link>

      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="Tologin()">登录</el-button>
      </span>
    </el-dialog>
    <!-- 登录Dialog End -->

    <!-- 用户钱包弹窗 -->

    <el-drawer title="钱包"
      :visible.sync="dialogVisible1">
      <div class="user_money">
        <div class="user_money_info">
          <div>
            <p>总资产</p>
            <p>{{balance.blance}}元</p>
          </div>
          <div>
            <p>累计充值</p>
            <p>{{balance.ljcz}}元</p>
          </div>
          <div>
            <p>累计消费</p>
            <p>{{balance.xfe}}元</p>
          </div>
        </div>
        <div class="user_money_opera">
          <div class="opera">
            <p>满100送10元</p>
            <el-button size="mini"
              round
              @click="rechargeMoney(100)">充值</el-button>
          </div>
          <div class="opera">
            <p>满1000送100元</p>
            <el-button size="mini"
              round
              @click="rechargeMoney(100)">充值</el-button>
          </div>
        </div>
      </div>

    </el-drawer>

    <!-- 用户钱包弹窗 End-->
  </div>
</template>

<script>
import { Login, Balance, Recharge } from '@/utils/api/user.js';
import {
  getSbysanduid,
  GetShoppingCatbyUseid,
  getCommodityLike,
  updateStatus,
} from '@/utils/api/api.js';
var recoder;
export default {
  data() {
    return {
      username: 'admin',
      password: '123456',
      //当前用户数据
      user: [],
      //登录框状态
      dialogVisible: false,
      //用户钱包抽屉状态
      dialogVisible1: false,
      //订单五个状态
      orderState: ['待支付', '待发货', '待收货', '待评价', '已完成'],
      //用户钱包数据
      balance: [],
      //购物车数量角标
      countGoodsNum: 0,
      //输入关键字
      queryInfo: '',
      //订单状态表格数据
      tableData: [],
    };
  },
  methods: {
    //登录
    Tologin() {
      const userInfo = {
        uname: this.username,
        upassword: this.password,
      };
      Login(userInfo)
        .then(resp => {
          if (resp.code == 200) {
            this.$message({ message: `登录成功`, type: 'success' });
            //关闭弹窗
            this.dialogVisible = false;
            //修改登录状态State
            this.$store.commit('changeLogin', resp),
              //更新状态
              this.updateLogin();
            this.countGoods();
          }
        })
        .catch(err => {
          // console.log(err);
        });
    },
    //根据订单状态获取商品
    getOrderGoods(val) {
      getSbysanduid(this.user.uid, val).then(resp => {
        this.tableData = resp.msg;
      });
    },

    //获取用户钱包
    getUserMoneyBag() {
      this.dialogVisible1 = true;
      Balance(this.user.uid).then(resp => {
        this.balance = resp.sku;
      });
    },
    //钱包充值
    rechargeMoney(val) {
      Recharge(this.user.uid, val).then(resp => {
        if (resp.code == 200) {
          this.$message({
            type: 'success',
            message: '充值成功',
          });
          this.getUserMoneyBag();
        }
      });
    },
    //发货
    open(val) {
      updateStatus(this.userId, val, 3).then(resp => {
        if (resp.code == 200) {
          this.$notify({
            title: '发货通知',
            type: 'success',
            message: `该商品已发货，目前在上海市中转部`,
          });
        }
      });
    },
    //收货
    shouHuo(val) {
      updateStatus(this.userId,val,4).then(resp => {
        if (resp.code == 200) {
          this.$notify({
            title: '您已收货',
            type: 'success',
            message: `您已收货，请记得给个好评哦`,
          });
        }
      });
    },

    //跳转购物车
    goShoppingCart() {
      this.$router.push({
        path: '/shoppingCart',
      });
    },
    //登出
    logout() {
      localStorage.clear();
      this.$router.go(0);
    },
    updateLogin() {
      this.user = JSON.parse(localStorage.getItem('user'));
    },
    //商品计数器
    countGoods() {
      if (this.user) {
        GetShoppingCatbyUseid(this.user.uid).then(resp => {
          this.$store.commit('currentShoppingCartNum', resp.msg.length);
          this.countGoodsNum = this.$store.state.shoppingCartNum;
        });
      } else {
        return 99;
      }
    },
    home() {
      this.$router.push({
        path: '/home',
      });
    },
    //接收关键字,并搜索
    querySearch(query, cb) {
      console.log(query);
      getCommodityLike(query).then(resp => {
        this.allInfos = resp.sku.map(item => {
          return {
            value: item.name,
            id: item.commodityID,
            text: item.blackname,
            price: item.price,
            blackname: item.blackname,
          };
        });
        console.log(this.allInfos);
        if (this.allInfos.length > 0) {
          cb(this.allInfos);
        } else {
          this.allInfos = [
            { value: '未查询到商品', id: 0, text: '请重新输入' },
          ];
          cb(this.allInfos);
        }
      });
    },
    //清除搜索框
    clickClearable() {
      this.$refs.autocomplete.activated = true;
    },
    //查询列表点击事件
    handleSelect(item) {
      this.$router.push({
        path: '/details',
        query: {
          goodsId: Number(item.id),
        },
      });
    },
    //跳转至搜索结果
    toDeatail() {
      localStorage.setItem('SEARCH_KEY', this.queryInfo);
      this.$router.push({
        path: '/goodsListMore',
        query: {
          query: this.queryInfo,
          time: Date.now(),
        },
      });
    },
    htmlValue(val) {
      let key = this.queryInfo;
      if (key.length > 0) {
        return val.replace(
          new RegExp(key, 'g'),
          "<span style='color:orange;'>" + key + '</span>'
        );
      }
      return val;
    },
    handleEdit(index, val) {
      switch (index) {
        case 0:
          this.$router.push({
            path: '/counter',
            query: {
              idx: [val],
            },
          });
          break;
        case 1:
          this.open(val);
          break;
        case 2:
          this.shouHuo(val);
          break;
        case 3:
          alert('去评价');
          break;
        default:
          alert('再次购买');
      }
    },
  },
  created() {
    this.updateLogin();
    this.countGoods();
  },
  updated() {
    // this.$forceUpdate()
  },
};
</script>

<style lang="scss" scope>
.highlight {
  color: orange;
  font-weight: bold;
}

.popoverPadding {
  padding: 0 !important;
}

.el-tabs--card {
  height: 400px;
  /* overflow-y: auto; */
}

.banlance-container {
  margin: 20px;
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  background-color: #f8f8f8;
  border-radius: 20px;

  // flex-direction: column;
  div {
    display: flex;
    flex-direction: column;
    text-align: center;

    div {
      font-size: 16px;
      font-weight: bold;
      color: rgb(68, 68, 68);
    }

    p {
      margin-top: 20px;
      font-size: 20px;
      color: rgb(255, 189, 65);
    }
  }
}

.balance-add {
  display: flex;
  flex-direction: column;
  margin: 20px;
  background-color: #f8f8f8;
  border-radius: 20px;
  padding: 10px 10px;
  color: #000000;

  div {
    margin: 5px 5px;
    display: flex;
    justify-content: space-between;
  }
}

.el-tab-pane {
  height: 220px;
  // overflow-y: auto;
}

.user-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  .icon-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px 0;

    .icon1 {
      width: 40%;
      display: flex;
      flex-direction: column;
      text-align: center;
      padding: 6px;

      i {
        color: orange;
        font-size: 30px;
      }
    }
  }

  .user-font-style {
    font-size: 20px;
    font-family: YouYuan;
  }

  .userImg {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid gray;
    // transform: translateX(-20px);
  }

  .btn-container {
    display: flex;
    width: 80%;
    margin: 0 auto;
  }
}

.tabarMain {
  width: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background-color: #535353;
  color: #fff;

  .barFrame {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;

    .welcome {
      margin: auto 0;
    }

    .frameFont {
      color: rgb(255, 174, 0);
      font-weight: bold;
    }

    .el-dropdown {
      font-size: 16px;
      color: #000000;
      margin: 0 10px;
    }

    .shoppingCartStyle {
      margin: 0;
      cursor: pointer;
      margin: 0 8px;

      .shoppingCartBtn {
        padding: 8px;
      }
    }
  }

  .tabarMain {
    width: 100%;
    display: flex;
    text-align: center;
    padding: 30px;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    background-color: white;

    .tabarFrame {
      width: 1200px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .ESHOP {
        font-size: 30px;
        color: rgb(255, 132, 0);
        font-weight: bolder;
        cursor: pointer;
      }

      :deep(.el-input__inner) {
        border-color: rgb(255, 132, 0);
      }

      :deep(.el-input-group__append, .el-input-group__prepend) {
        background-color: rgb(255, 132, 0);
        color: white;
        border-color: rgb(255, 132, 0);
      }

      .el-input {
        width: 400px;
      }
    }
  }

  .el-input {
    margin: 10px 10px;
    width: 90%;
  }

  .order {
    cursor: pointer;
  }

  .el-badge__content {
    border: none;
  }
}

.addr {
  font-size: 10px;
  color: #949494;
}
:deep(.my-autocomplete) {
  line-height: normal;
  padding: 4px;
}
.user_money {
  width: 100%;
  display: flex;
  flex-direction: column;
  color: black;
  .user_money_info {
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    div > p:nth-child(2) {
      color: orange;
      font-size: 20px;
      margin: 10px 0 0 0;
    }
  }
  .user_money_opera {
    display: flex;
    flex-direction: column;
    .opera {
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
    }
  }
}
</style>
